<!-- 全局参数 -->
<template>
    <div>
        <el-card class="box-card"  shadow="never">
        <div slot="header" class="clearfix">
          <span class="sign">I</span>
          <span class="sign-title">全局参数</span>
          <el-button style="float: right; padding:4px 8px;margin-left:5px;" type="primary" @click="confirmClick('ruleForm')">保存</el-button>
        </div>
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="40%">
            <el-row :gutter="24">
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="传输流控：">
                        <el-input size="small" v-model="ruleForm.rsync_threshold_qos"><span slot="append">M/S</span></el-input>
                        <span class="tips-style">（0表示不启用流控）</span>
                    </el-form-item>
                </el-col>
             
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="通讯端口：">
                        <el-input size="small" placeholder="请输入通讯端口" v-model="ruleForm.rsync_service_port"></el-input>
                        <span class="tips-style">（与终端电脑进行文件同步使用端口）</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="执行版本转储时间点：" >
                      <el-select v-model.number="ruleForm.exec_dump_hours" style="width:40%;">
                          <el-option v-for="item in 24" :key="item" :label="item-1 + ':00'" :value="(item-1)"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                  <el-form-item label-width="31.8%">
                        <el-checkbox v-model="ruleForm.checked"></el-checkbox>
                        <span> 转储文件超过：</span><el-input :disabled="ruleForm.checked===false" style="width:70px !important;margin-left:12px;" size="small" @change="inputChange" v-model="ruleForm.del_dump_by_disk_percent"></el-input>
                        <span> %时自动删除最后一个版本，但是保留最少：</span><el-input :disabled="ruleForm.checked===false" style="width:70px !important;" size="small" v-model="ruleForm.min_ver_count"></el-input> 个版本
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item label-width="31.8%">
                        <el-checkbox v-model="ruleForm.is_dump_compress" false-label="0" true-label="1"></el-checkbox>
                        <span> 形成转储版本时，自动使用压缩转储模式</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24" >
                  <el-form-item  label="执行转储间隔：">
                        <el-input size="small" placeholder="请输入执行版本转储时间点" v-model="ruleForm.dump_interval"><span slot="append">小时</span></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :sm="24" :md="24" :lg="24" >
                  <el-form-item  label="终端文件版本磁盘空间管理策略：">
                        <span>
                            <el-radio v-model="radio" label="1">超过磁盘空间90%时，自动绕接，删除最后一个版本（推荐），但至少保留</el-radio>
                            <el-input style="width:70px !important;" size="small" v-model.number="ruleForm.RsyncPort"/> 个历史版本
                        </span><br/>
                        <el-radio v-model="radio" label="2">超过磁盘空间90%时，不做任何操作，等待管理人员手工操作</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24" >
                  <el-form-item  label-width="31.8%">
                        <el-checkbox v-model="ruleForm.checked"></el-checkbox>
                        <span> 终端文件版本形成时启动压缩储存（建议开启）</span>
                  </el-form-item>
                </el-col> -->
            </el-row>
          </el-form>    
        </div>
        <div>

        </div>
      </el-card>
    </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
export default {
    data(){
        return{
            ruleForm:{
                rsync_threshold_qos:'',
                rsync_service_port:'',
                exec_dump_hours:0,
                del_dump_by_disk_percent:'',
                checked:false,
                min_ver_count:'',
                is_dump_compress:'0',
                dump_interval:''
            },
            rules:{},
            oldData:[]
        }
    },
    created(){
      this.getData()
    },
    methods:{
      async getData(){
        const res = await connrequest('GetParamThreshhold');
        // console.log(res.Data);
        this.oldData = res.Data;
        res.Data.map(item=>{
          for (const i in this.ruleForm) {
            if (item.Name === i) {
              this.ruleForm[i] = item.Value
            }
          }
        })
        this.ruleForm.exec_dump_hours = Number(this.ruleForm.exec_dump_hours)
      },
      async confirmClick(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.oldData = this.oldData.map(item => {
            for (const key in this.ruleForm) {
                if(item.Name === key){
                  if (typeof this.ruleForm[key] != 'string') {
                    item.Value = JSON.stringify(this.ruleForm[key])
                  }else{
                    item.Value = this.ruleForm[key]
                  }
                }
                }
                return item
            })
            const data = {
              Data:this.oldData
            }
            const res = await connrequest('SetParamThreshhold',data)
            this.$message.success('修改成功')
            this.getData();
            
          }
        })
      },
      inputChange(val){
        if (val==='0') {
          this.ruleForm.checked = false
        }else{
          this.ruleForm.checked = true
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}
.box-card{
  // margin: 16px;
  margin-bottom: 16px !important;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
::v-deep.el-input--small{
    width:40% !important;
}
::v-deep.el-card__header{
  padding: 10px !important;
}
.el-form-item{
  margin-bottom: 10px !important;
}
::v-deep.el-form-item__error{
  padding-top:  0 !important;
}
.text-style{
    color:red;
    margin-left:10px;
}
.el-radio{
    margin-right:5px !important;
}
</style>